<!-- 我的视图 -->

<template>
  <div
    ref="view"
    v-bind="viewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground cover @loaded="toLoaded">
      <ViewRealtime v-for="item in realtimeList" :key="`${item.id}-${item.person.id}`" :obj="item" />
      <ViewPoint v-for="item in pointList" :key="item.id" :obj="item" @click="openPoint" />
      <ViewTrack :arr="trackList" />
    </ViewBackground>

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapView',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    MapView,
    CORE.mixWeb(),
    CORE.mixSelect('realtime', 'realtime_'),
    CORE.mixInfo('point', 'point_'),
    CORE.mixSelect('track', 'track_'),
  ],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 实时点位列表
     */
    realtimeList() {
      const { map_list, realtime_select } = this
      const realtimeList = map_list.map((item) => {
        const person = realtime_select.find((x) => item.deviceId === x.pointId)
        return person ? { ...item, person } : null
      })
      return realtimeList.filter((item) => item)
    },

    /**
     * 巡更点列表
     */
    pointList() {
      const { MAP, DICT, param, map_list } = this
      if (param.tab === DICT.TAB[0][0] || MAP.inTrack) return []

      return map_list
    },

    /**
     * 轨迹列表
     */
    trackList() {
      const { MAP, DICT, param, map_list, track_select } = this
      if (param.tab === DICT.TAB[0][0] || !MAP.inTrack) return []

      return track_select.map((track) => {
        const point = map_list.find((item) => item.deviceId === track.pointId) || {}
        return { ...point, track }
      })
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 方法
     */
    openPoint(item) {
      this.point_startInfo({ id: item.deviceId })
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
